<template>
  <div class="card">
    <el-card shadow="always" class="card-box">
      <div class="title">
        {{ title }}
      </div>
      <div class="container">
        <div class="tabbar">
          <template v-for="(tab, index) in tabbarList" :key="index">
            <span
              :class="['tab', { active: currentIndex === index }]"
              @click="clickTab(tab.comment, index)"
              >{{ tab.title }}</span
            >
          </template>
        </div>
        <div class="card-content">
          <slot name="content" :showCom="tabName"> 内容 </slot>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

interface Props {
  title?: string
  tabbarList?: any
}
// ts默认类型写法
const props = withDefaults(defineProps<Props>(), {
  title: '标题',
  tabbarList: () => [
    {
      title: '账号登录',
      comment: 'LoginFormCom'
    },
    {
      title: '手机登录',
      comment: 'phoneFormCom'
    }
  ]
})

/* const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  tabbarList: {
    type: Array,
    default: () => [
      {
        title: '账号登录',
        comment: 'LoginFormCom'
      },
      {
        title: '手机登录',
        comment: 'phoneFormCom'
      }
    ]
  }
}) */
const currentIndex = ref(0)
const tabName = ref(props.tabbarList[0].comment)
function clickTab(tabCom: any, index: number) {
  currentIndex.value = index
  tabName.value = tabCom
}
</script>

<style lang="less" scoped>
.card {
  width: 100%;
  .card-box {
    height: 346px;
    .title {
      height: 20px;
      line-height: 20px;
      display: flex;
      justify-content: center;
      font-size: 17px;
      font-weight: 700;
    }
    .container {
      .tabbar {
        display: flex;
        justify-content: center;
        height: 35px;
        line-height: 30px;
        padding: 10px 0 15px;
        .tab {
          // width: 50%;
          margin: 0 20px;
          padding: 5px 8px;
          display: flex;
          justify-content: center;
          cursor: pointer;
          position: relative;
        }
        .active {
          font-size: 16px;
          font-weight: 500;
          color: var(--activeColor);
          &::before {
            content: ' ';
            height: 2px;
            width: 50%;
            position: absolute;
            bottom: 0px;
            left: 19px;
            background-color: var(--activeColor);
          }
        }
      }
    }
  }
}
</style>
